<!DOCTYPE html>
<html lang="en">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- Meta, title, CSS, favicons, etc. -->
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>DataTables | Gentelella</title>

  <!-- Bootstrap -->
  <link href="/graduation-manager/vendors/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Font Awesome -->
  <link href="/graduation-manager/vendors/font-awesome/css/font-awesome.min.css" rel="stylesheet">
  <!-- NProgress -->
  <link href="/graduation-manager/vendors/nprogress/nprogress.css" rel="stylesheet">
  <!-- iCheck -->
  <link href="/graduation-manager/vendors/iCheck/skins/flat/green.css" rel="stylesheet">
  <!-- Datatables -->
  <link href="/graduation-manager/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
  <link href="/graduation-manager/vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
  <link href="/graduation-manager/vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css"
        rel="stylesheet">
  <link href="/graduation-manager/vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css"
        rel="stylesheet">
  <link href="/graduation-manager/vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">
  <link href="/graduation-manager/vendors/toastr/toastr.min.css" rel="stylesheet">

  <!-- Custom Theme Style -->
  <link href="/graduation-manager/build/css/custom.min.css" rel="stylesheet">
</head>

<body>
<div id="roleTable">
  <div class="x_panel">
    <div class="x_title">
      <h2>Plus Table Design</small></h2>
      <ul class="nav navbar-right panel_toolbox">
        <li><a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
        </li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false"><i
              class="fa fa-wrench"></i></a>
          <ul class="dropdown-menu" role="menu">
            <li><a href="#">Settings 1</a>
            </li>
            <li><a href="#">Settings 2</a>
            </li>
          </ul>
        </li>
        <li><a class="close-link"><i class="fa fa-close"></i></a>
        </li>
      </ul>
      <div class="clearfix"></div>
    </div>
    <div class="x_content">
      <p class="text-muted font-13 m-b-30">
        DataTables has most features enabled by default, so all you need to do to use it with your own tables
        is to call the construction function: <code>$().DataTable();</code>
      </p>
      <table id="datatable-role" class="table table-striped table-bordered bulk_action">

      </table>
    </div>
  </div>
</div>

<!--&lt;!&ndash; jQuery &ndash;&gt;
<script src="/graduation-manager/vendors/jquery/dist/jquery.min.js"></script>
&lt;!&ndash; Bootstrap &ndash;&gt;
<script src="/graduation-manager/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
&lt;!&ndash; FastClick &ndash;&gt;
<script src="/graduation-manager/vendors/fastclick/lib/fastclick.js"></script>
&lt;!&ndash; NProgress &ndash;&gt;
<script src="/graduation-manager/vendors/nprogress/nprogress.js"></script>
&lt;!&ndash; iCheck &ndash;&gt;
<script src="/graduation-manager/vendors/iCheck/icheck.min.js"></script>
&lt;!&ndash; Datatables &ndash;&gt;
<script src="/graduation-manager/vendors/datatables.net/js/jquery.dataTables.js"></script>
<script src="/graduation-manager/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
<script src="/graduation-manager/vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="/graduation-manager/vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
<script src="/graduation-manager/vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="/graduation-manager/vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="/graduation-manager/vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="/graduation-manager/vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
<script src="/graduation-manager/vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
<script src="/graduation-manager/vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
<script src="/graduation-manager/vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
<script src="/graduation-manager/vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
<script src="/graduation-manager/vendors/jszip/dist/jszip.min.js"></script>
<script src="/graduation-manager/vendors/pdfmake/build/pdfmake.min.js"></script>
<script src="/graduation-manager/vendors/pdfmake/build/vfs_fonts.js"></script>
<script src="/graduation-manager/vendors/toastr/toastr.min.js"></script>-->
<!--&lt;!&ndash; Custom Theme Scripts &ndash;&gt;-->
<!--<script src="/graduation-manager/build/js/custom.js"></script>-->
<script type="text/javascript">
  $(function () {
    //列表table初始化
    $("#datatable-role").dataTable({
      ajax: /*{
       url: '/gratuation-manager/user/login.do',
       data: {
       loginName: "admin",
       password: "admin"
       },
       type: 'POST',
       //dataSrc: 'data',
       },*/
          function (data, callback, settings) {
            //封装请求参数
            var param = {};
            param.start = data.start;//开始的记录序号
            param.length = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候
            param.page = (data.start / data.length) + 1;//当前页码
            $.ajax({
              type: 'POST',
              url: '/graduation-manager/user/findAll.do',
              dataType: 'json',
              timeout: 60000,
//          cache: false, //禁用缓存
              success: function (resData, status, xhr) {
                //console.info(resData, status, xhr);
                var returnData = {};
                returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回
                returnData.recordsTotal = 1;//resData.data.total;
                returnData.recordsFiltered = 1;// resData.data.total;
                returnData.data = resData.data;
                callback(returnData);

                console.info(resData.code);
                console.info(resData.data);
                toastr.success('操作成功！');
              },
              error: function (xhr, errorType, error) {
                toastr.error("请求服务器失败！");
              }
            });
          },
      //列表表头字段
      columns: [
        {
          data: null,
          title: '<input type="checkbox" onClick="" />',
          render: function (data, type, row, meta) {
            return '<input type="checkbox" name="selectIds" value="' + row.userId + '" />';
          }
        },
        {
          "data": "userId",
          "title": "id"
        },
        {
          "data": "loginName",
          "title": "名称"
        }
      ]
    });

  });

</script>
</body>
</html>